<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style-type: none; text-decoration: none;}
    .cont{ width: 200px; height: 30px; background: #333;}
    .cont > ul{ width: 200px; height:auto; background-color: red;}
    .cont > ul > li{ width: 200px; height: 30px; background-color: #333; position: relative;}
    .cont > ul > li > a{ width: 200px; height: 30px; display: block; text-align: center; line-height: 30px; color: #fff;}
    .cont > ul > li  ul{top: 30px;left: 0; background-color: red; width: 200px; display: none; position: absolute; transition: all 1s;}
    .cont > ul > li:hover > ul{display: block; animation: donghua 1s;}
    .cont > ul > li > ul > li{ width: 200px; height: 30px; position: relative;}
    .cont > ul > li > ul > li > ul{ position: absolute; left: 100%; top: 0; background-color: green; transition: all 1s;}
    .cont > ul > li > ul > li > ul  li{ width: 200px; height: 30px; position: relative;}
    /* .cont > ul > li > ul > li:hover > ul{display: block; animation: donghua 1s;} */
    @keyframes donghua {
        from{opacity: 0; transform: rotateY(90deg);}
        to{opacity: 1; transform: rotateY(0deg);}
    }
</style>
<body>
    <div class="cont">
        <ul>
            <li>
                <a href="###">首页</a>
                <ul class="ct">
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                    <li>
                        <a href="###">菜单一</a>
                        <ul class="ct">
                            <li><a href="###">菜单二</a></li>
                            <li><a href="###">菜单二</a>
                                <ul class="ct">
                                    <li><a href="###">菜单二</a></li>
                                    <li><a href="###">菜单二</a><ul class="ct">
                                        <li><a href="###">菜单二</a></li>
                                        <li><a href="###">菜单二</a></li>
                                        <li><a href="###">菜单二</a></li>
                                        <li><a href="###">菜单二</a><ul class="ct">
                                            <li><a href="###">菜单二</a></li>
                                            <li><a href="###">菜单二</a></li>
                                            <li><a href="###">菜单二</a></li>
                                            <li><a href="###">菜单二</a></li>
                                            <li><a href="###">菜单二</a></li>
                                        </ul></li>
                                        <li><a href="###">菜单二</a></li>
                                    </ul></li>
                                    <li><a href="###">菜单二</a></li>
                                    <li><a href="###">菜单二</a></li>
                                    <li><a href="###">菜单二</a></li>
                                </ul></li>
                            <li><a href="###">菜单二</a></li>
                            <li><a href="###">菜单二</a></li>
                            <li><a href="###">菜单二</a></li>
                        </ul>
                    </li>
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                    <li><a href="###">菜单一</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        let lis = document.querySelectorAll('.ct li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                let childrenNodes = this.children;
                for (let j = 0; j < childrenNodes.length; j++) {
                    console.log(childrenNodes[j].nodeName);
                    if (childrenNodes[j].nodeName === 'UL') {
                        childrenNodes[j].style.display = 'block';
                        childrenNodes[j].parentNode.style.background = '#ccc';
                        childrenNodes[j].style.position = 'absolute';
                        childrenNodes[j].style.left='100%';
                        childrenNodes[j].style.top=0;
                    }
                }
            }
            lis[i].onmouseleave = function () {
                let childrenNodes = this.children;
                for (let j = 0; j < childrenNodes.length; j++) {
                    if (childrenNodes[j].nodeName === 'UL') {
                        childrenNodes[j].style.display = 'none';
                        childrenNodes[j].parentNode.style.background = 'none';
                    }
                }
            }
        }
    </script>
</body>
</html>